<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <iframe src="https://afdian.com/leaflet?slug=coldflame" width="100%" scrolling="no" height="200"
              frameborder="0"></iframe>
      <el-row :gutter="10">
        <el-col :span="14">
          <p style="text-indent: 2ch;margin-top: 0;">
            目前插件每月无偿服务6万余名主播，超110万次使用。维护不易，服务器开销不低，如果觉得插件好用，欢迎支持本插件的开发和维护，不胜感激！</p>
          <p>
            <strong>赞助可获得：</strong><br/>
            ·发电支持专属弹幕皮肤(右侧预览)<br/>
            ·加入专属技术支持QQ群<br/>
            ·加入插件页特别感谢名单<br/>
          </p>
          <a href="https://afdian.com/a/coldflame" target="_blank"><img width="140" src="https://pic1.afdiancdn.com/static/img/welcome/button-sponsorme.png" alt="赞助按钮图片"></a >
        </el-col>
        <el-col :span="10" style="display: grid;justify-content: center;">
          <el-image
              style="height: 220px"
              src="https://i1.xuehusang.cn/openlivechat-css/image/support-danmu-skin-preview-thumb.jpg"
              :preview-src-list="['https://i1.xuehusang.cn/openlivechat-css/image/support-danmu-skin-preview.png','https://i1.xuehusang.cn/openlivechat-css/afdian-preview.png']">
          </el-image>
        </el-col>
      </el-row>
    </el-card>
    <el-collapse v-model="activeNames" style="margin: 0 10px 0 10px;">
      <el-collapse-item name="0">
        <template slot="title">
          <p style="font-weight: bold">支持鸣谢</p>
        </template>
        <el-row :gutter="5">
          <el-col :xs="8" :sm="8" :md="6" :lg="4" :xl="4" v-for="sponsor in this.sponsorList" :key="sponsor[0]">
            <div style="display: flex;align-items: center;margin-bottom: 10px;">
              <el-image
                  :src="sponsor[1]"
                  fit="fill"
                  style="width: 45px; height: 45px;border-radius: 50%;margin-bottom: 4px;margin-right: 5px;">
                <div slot="error" class="image-slot">
                  <el-image
                      src=""
                      fit="fill"
                  />
                </div>
              </el-image>
              <p>{{ sponsor[0] }}</p>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item name="1">
        <template slot="title">
          <p style="font-weight: bold">{{ $t('help.tutorial') }}</p>
        </template>
        <div style="font-weight: bold;">{{ $t('help.p1') }}</div>
        <el-image src="https://i1.xuehusang.cn/openlivechat-css/tutorial/t1.png"
                  style="max-width: 100px;border-radius: 15px;" fit="scale-down"></el-image>
        <div>{{ $t('help.p2') }}</div>
        <el-image src="https://i1.xuehusang.cn/openlivechat-css/tutorial/t2.png"
                  style="max-width: 600px;border-radius: 15px;" fit="scale-down"></el-image>
        <div>{{ $t('help.p3') }}</div>
        <el-image src="https://i1.xuehusang.cn/openlivechat-css/tutorial/t3.png"
                  style="max-width: 300px;border-radius: 15px;" fit="scale-down"></el-image>
        <div>{{ $t('help.p4') }}</div>
        <el-image src="https://i1.xuehusang.cn/openlivechat-css/tutorial/t4.png"
                  style="max-width: 300px;border-radius: 15px;" fit="scale-down"></el-image>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <p style="font-weight: bold">{{ $t('help.Q&A') }}</p>
        </template>
        <div v-for="(QA, idx) in $t('help.qaList')">
          <div>{{ QA[0] }}<br/>{{ QA[1] }}</div>
          <el-divider v-if="idx !== $t('help.qaList').length-1"></el-divider>
        </div>
      </el-collapse-item>
      <el-collapse-item :title="$t('help.privacy')" name="3">
        <div>{{ $t('help.p6') }}<a href="https://open-live.bilibili.com/document/f6017467-1182-fd2b-7a96-793b9afb911a"
                                   target="_blank">{{ $t('help.p7') }}</a></div>
        <div>{{ $t('help.p5') }}</div>
        <!--      <div>{{ $t('help.p8') }} <a href="https://cloud.tencent.com/document/product/1464/65740?from=copy" target="_blank">{{ $t('help.p9') }}</a></div>-->
      </el-collapse-item>
      <el-collapse-item :title="$t('help.updateLog')" name="5">
        <el-timeline reverse>
          <el-timeline-item
              v-for="(activity, index) in updateLog"
              :key="index"
              :timestamp="activity.timestamp">
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-collapse-item>
      <el-collapse-item :title="$t('help.copyright')" name="4">
        <div>
          [blivechat] https://github.com/DoodleBears/blivechat/<br/>
          <br/>
          MIT License<br/>
          <br/>
          Copyright (c) 2019 xfgryujk<br/>
          <br/>
          Permission is hereby granted, free of charge, to any person obtaining a copy<br/>
          of this software and associated documentation files (the "Software"), to deal<br/>
          in the Software without restriction, including without limitation the rights<br/>
          to use, copy, modify, merge, publish, distribute, sublicense, and/or sell<br/>
          copies of the Software, and to permit persons to whom the Software is<br/>
          furnished to do so, subject to the following conditions:<br/>
          <br/>
          The above copyright notice and this permission notice shall be included in all<br/>
          copies or substantial portions of the Software.<br/>

          THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR<br/>
          IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,<br/>
          FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE<br/>
          AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER<br/>
          LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,<br/>
          OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE<br/>
          SOFTWARE.
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'Help',
  data() {
    return {
      activeNames: [''],
      updateLog: [{
        content: '插件上线 | 增加：免费弹幕样式 | 增加：侧边栏服务状态监控Badge',
        timestamp: '2023-09-11'
      }, {
        content: '增加：补充帮助页面 | 增加：检测到直播姬插件地址默认启用皮肤美化 | 增加：样式生成器可自选参数模拟弹幕测试',
        timestamp: '2023-09-12'
      }, {
        content: '修复：官方小表情显示错误',
        timestamp: '2023-09-12'
      }, {
        content: '修复：饭贩改版幻星后插件配置页width从1120px降至760px所导致的自适应排版不合理',
        timestamp: '2023-09-13'
      }, {
        content: '优化：海外主播连接体验（接入全球加速，支持ipv6访问）',
        timestamp: '2023-09-27'
      }, {
        content: '优化：掉线重连次数过多时转用备用弹幕服务器地址',
        timestamp: '2023-09-29'
      }, {
        content: '优化：新增用户引导和操作触发提示，新增皮肤的选中状态，补充帮助页-常见Q&A',
        timestamp: '2023-10-05'
      }, {
        content: '修复：弹幕timestamp错误',
        timestamp: '2023-10-11'
      }, {
        content: '增加：手机扫码用作监看副屏',
        timestamp: '2023-11-23'
      }, {
        content: '增加：爱发电赞助支持，皮肤权限系统',
        timestamp: '2023-12-05'
      }, {
        content: '增加：refs调用方法判空',
        timestamp: '2023-12-22'
      }, {
        content: '增加：显示点赞消息，并入message renderer，增加likeCount属性',
        timestamp: '2024-01-10'
      }, {
        content: '增加：皮肤商城，从幻星加载页面默认关闭样式生成器防止误导用户',
        timestamp: '2024-01-17'
      }, {
        content: '提高插件地址辨识度',
        timestamp: '2024-01-18'
      }, {
        content: '增加主页各项参数使用提示tooltips，优化form布局',
        timestamp: '2024-02-22'
      }, {
        content: '增加用户名打码功能选项（为什么有人需要这种奇怪的功能= =）',
        timestamp: '2024-02-22'
      }, {
        content: '适配哔哩哔哩开放平台uid更改为open_id后识别主播身份',
        timestamp: '2024-03-12'
      }, {
        content: '上线上舰贺报，更改开平信息传参方式',
        timestamp: '2024-03-25'
      }, {
        content: '增加多线路保活，优化后端',
        timestamp: '2024-04-09'
      }, {
        content: '接入开平拓展，新增购买皮肤使用教程',
        timestamp: '2024-05-15'
      }, {
        content: '新增notify',
        timestamp: '2024-06-07'
      }],
      sponsorList: []
    };
  },
  mounted() {
    this.getAfdianSponsorList()
  },
  methods: {
    async getAfdianSponsorList() {
      let res
      try {
        res = (await axios.get('https://olc.xuehusang.cn/openlivechat/sponsor')).data
      } catch {
        return
      }
      if (res.code === 0) {
        this.sponsorList = res.sponsor_list
      } else {
        console.log('获取赞助名单失败')
      }
    }
  }
}
</script>

<style scoped>
p, h1, h2 {
  color: black;
}

.box-card {
  margin: 5px;
}
</style>
